<template>
    <div class="page-wrapper">

        <el-form  ref="form" :model="form" :rules="formRules" :label-position="labelPosition" label-width="80px" >
            <el-form-item label="下载链接" prop="href">
                <el-row>
                    <el-col :span="18">
                        <el-input size="mini" v-model="form.href"></el-input>
                    </el-col>
                    <el-col :span="5" :push="1">
                        <el-button @click="open" size="mini" type="primary">下载</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>

        <downloadList style="margin-top: 40px" :data="downloadList"></downloadList>
    </div>
</template>
<script>
    import { mapMutations,mapGetters } from "vuex";
    import { hrefCheck,B2MB } from "@/utils/index.js";
    import downloadList from "@/components/common/downloadList/index.vue";
    export default {
        props: {},
        data() {
            return {
                labelPosition: 'center',
                form: {
                    href:`http://download.xunyou.com/specver/pconline/xunyou_2014.exe`
                },
                formRules:{
                    href:[
                        { required: true, message: '必填', trigger: 'blur'},
                        { validator: hrefCheck,message:"url地址错误",trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            open() {
                this.$refs['form'].validate().then(()=>{
                    this.setId();
                    console.log(this.form.href)
                    this.$electron.ipcRenderer.send("download",{
                        url:this.form.href,
                        directory:this.url,
                        id:this.id
                    });
                }).catch(err=>{
                   console.log(err)
                })
            },
            init(){
                this.$electron.ipcRenderer.on("download-progress",(e,obj)=>{
                    let { process } = obj;
                    this.setItemPercentage(parseInt(process * 100));
                });
                this.$electron.ipcRenderer.on("download-finished",(e,obj)=>{
                    this.moveDownloadlistToHistorylist();
                    this.$message({
                        message: '下载成功!',
                        type: 'success'
                    });
                });
                this.$electron.ipcRenderer.on("download-begin",(e,data)=>{
                    this.addItem({
                        id:this.id,
                        type:1,
                        filename:data.name,
                        filesize: B2MB(data.total),
                        percentage:0,
                        filepath:this.url,
                        fileicon:"iconfont-shusc248"
                    });
                });
                this.$electron.ipcRenderer.on("download-error",(e,msg)=>{
                    this.$message({
                        message: '无法下载!',
                        type: 'error'
                    });
                })
            },
            ...mapMutations({
                addItem:"ADD_DOWNLOADLIST_ITEM",
                setItemPercentage:"SET_DOWNLOADLIST_ITEM_PERCENTAGE",
                setId:"SET_ID",
                moveDownloadlistToHistorylist:"MOVE_DOWNLOADLIST_TO_HISTORYLIST"
            })
        },
        components: {
            downloadList
        },
        created() {
            this.init();
        },
        mounted() {

        },
        computed:{
            url(){
                return this.$store.state.config.url
            },
            ...mapGetters(['id','downloadList'])
        },
        watch:{

        }
    }
</script>

<style lang="less">

</style>
